<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <!-- 修饰符 -->
        <!-- 语法: @事件名.修饰符名 -->
        <!-- 1. 鼠标事件事件修饰符 -->
        <!--    .prevent 阻止默认行为 -->
        <!--    .stop 阻止冒泡行为 -->
        <!-- 2. 键盘事件(按键)修饰符 -->
        <!--    .enter 监听回车按键 -->
        <!-- 3. v-model修饰符 -->
        <!-- .number 会把收集的数据, 转为数字类型 -->
        <!-- .trim 自动去除首尾空格-->
        <!-- .lazy -->

        <input
          type="text"
          v-model.lazy.number.trim="name"
          @click.stop
          @keyup.enter="add"
        />
        <!-- <input type="text" v-model.trim="name" @click.stop @keyup.enter="add" /> -->
      </div>

      <ul>
        <li v-for="(item, index) in list">
          <button @click="list.splice(index, 1)">{{item.name}}删除</button>
        </li>
      </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          name: "",
          list: [
            { id: 1, name: "张三" },
            { id: 2, name: "李四" },
            { id: 3, name: "王五" },
          ],
        },
        methods: {
          fn() {
            this.list.push({
              id: Date.now(),
              name: this.name,
            });
          },
        },
      });
    </script>
  </body>
</html>
